<div class="page_title">
    <h2 class="fl">{$pageTitle}</h2>
</div>
<section>
    <!--左右分栏：左侧栏目-->
    <div class="cont_col_lt" style="min-height:500px;min-width: 80%;">
        <ul class="admin_tab">
            <li><a class="active">接口列表</a></li>
            <li><a>接口验证配置</a></li>
        </ul>
        <div class="admin_tab_cont" style="display:block;">
        <table class="table">
            <tr>
                <th>配置名称</th>
                <th>当前请求地址</th>
                <th>当前请求方式</th>
                <th>使用状态</th>
                <th>操作</th>
            </tr>
            {volist name="list.data" id="vo"}
            <tr>
                <td class="center">{$vo.description}</td>
                <td class="center">{$vo.value.url}</td>
                <td class="center">{:strtoupper($vo.value.method)}</td>
                <td>{eq name='vo.status' value='1'}<i style="color:#38B018;" class="iconfont iconfont-zhengque"></i>{else /}<i style="color:#F00;" class="iconfont iconfont-cuowu"></i>{/eq}</td>
                <td class="center">
                    <a class="inner_btn loadContent" data-href="{:U('admin/Syncdata/info',['config_id'=>encrypt_id($vo.config_id)])}">查看详情</a>
                    <a class="inner_btn loadContent" data-href="{:U('admin/Syncdata/edit',['config_id'=>encrypt_id($vo.config_id)])}">修改</a>
                </td>
            </tr>
            {/volist}
        </table>
        </div>
        <div class="admin_tab_cont">
            <div class="cont_col_lt" style="width: 70%;max-width: 70%;">
            <ul class="ulColumn2">
                <li>
                    <span class="item_name" style="width:220px;">请求头部：</span>
                    <ul style="display: inline-table" id="headerParams">
                    {notempty name="user_service.value.header"}
                        {volist name="user_service.value.header" id="vo"}
                            <li>
                                <input type="text" class="textbox textbox_295 key" value="{$key}" placeholder="参数名" /> : 
                                <input type="text" class="textbox textbox_295 value" value="{$vo}" placeholder="参数值" />
                                <span class="iconfont iconfont-jian1 admin_litem_del"></span>
                            </li>
                        {/volist}
                    {/notempty}
                    <li><span class="iconfont iconfont-jia1 admin_litem_add" alt="点击添加参数" title="点击添加参数"></span></li>
                     </ul>
                </li>
                <li>
                    <span class="item_name" style="width:220px;">请求体：</span>
                    <ul style="display: inline-table" id="dataParams">
                    {notempty name="user_service.value.params"}
                        {volist name="user_service.value.params" id="vo"}
                            <li>
                                <input type="text" class="textbox textbox_295 key" value="{$key}" placeholder="参数名" /> : 
                                <input type="text" class="textbox textbox_295 value" value="{$vo}" placeholder="参数值" />
                                <span class="iconfont iconfont-jian1 admin_litem_del"></span>
                            </li>
                        {/volist}
                    {/notempty}
                    <li><span class="iconfont iconfont-jia1 admin_litem_add" alt="点击添加参数" title="点击添加参数"></span></li>
                     </ul>
                    <!--<span class="errorTips"></span>-->
                </li>
                <li>
                    <span class="item_name" style="width:220px;"></span>
                    <input type="submit" class="link_btn" value="提交修改"/>
                </li>
            </ul>
            <div style="display: none;" id="addHtml">
                <li>
                    <input type="text" class="textbox textbox_295 key" value="" placeholder="参数名" /> : 
                    <input type="text" class="textbox textbox_295 value" value="" placeholder="参数值" />
                    <span class="iconfont iconfont-jian1 admin_litem_del"></span>
                </li>
            </div>
            </div>
            <div class="cont_col_rt" style="max-width: 28%;margin-top: 10px;">
                <ul style="display: inline-table;line-height: 1.6;">
                    <li style="font-size: 18px;">
                        <span>配置说明</span>
                    </li>
                    <li style="margin-top: 18px;">
                        <span>一、验证头部：</span>
                        <div class="tishi" style="display: block;">
                            <a>参数解析规则：解析头部参数名称时,将在所有大写英文字母前加上'_'连接字符,整个参数名都将被转为大写,转换后的结果将列入header头部验证;参数值取配置值</a>
                            <p>配置举例：</p>
                            <p>如何添加 AUTH_TOKEN 头部验证,并规定值为 '123456'</p>
                            <p>1.点击“+”按钮</p>
                            <p>2.在参数名位置输入 AuthToken</p>
                            <p>3.在参数值位置输入 123456 即可完成配置</p>
                        </div>
                    </li>
                        
                    <li style="margin-top: 18px;">
                        <span>二、验证请求体：</span>
                        <div class="tishi" style="display: block;">
                            <a>参数解析规则：请求体验证时,参数名和参数值均不做任何处理(严格区分大小写)</a>
                            <p>配置举例：</p>
                            <p>如何添加 userName 参数验证,并规定值为 'admin'</p>
                            <p>1.点击“+”按钮</p>
                            <p>2.在参数名位置输入 userName</p>
                            <p>3.在参数值位置输入 admin 即可完成配置</p>
                            <a>备注：举例中的配置参数名为userName,参数值为admin,因为此处的验证严格区分大小写,故参数名传username将不会通过验证</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--左右分栏：右侧栏-->
    <div class="cont_col_rt border" style="max-width: 19%;">
        <div class="admin_right_notice">
        <pre>
       对接步骤
       
       
　　一、对接准备　
　
　　二、相关接口开发　

　　三、添加直播用户

　　四、用户数据同步　
　
　　五、完成对接
      </pre>  </div>
    </div>
</section>
<script>
$(function(){
    $(".admin_litem_add").click(function(){
        var addHtml = $("#addHtml").html();
        $(this).parent().before(addHtml);
    });
    $(".admin_litem_del").die().live('click',function(){
        $(this).parent().remove();
    });
        /** 点击提交 **/
    $('input[type="submit"]').click(function(){
       var data = $.extend({},{
                config_id:'{:encrypt_id($user_service.config_id)}',
                value:{}
           },{
                value:{
                    header:getInputValues($("#headerParams")),
                    params:getInputValues($("#dataParams")),
                }
           });
       if(data.value.header === false || data.value.params === false){
          msg_info('请将提交的信息填写完整','',1800);
          return false;
       }
       var send_data = {
            url:U('admin/Syncdata/edit_user_service'),
            type:'POST',
            data:data
       }
       send_ajax(send_data,function(res){
            if(res.status == 1){
                msg_success(res.data.info,'',1000);
            }else{
                msg_error(res.message);
            }
       })
    });
    //获取多个输入框的值
    function getInputValues(f_obj){
        var inputArr = f_obj.find('.key');
        var res = [];
        var is_return = false;
        if(inputArr.length > 0){
            inputArr.each(function(i){
                var _key = $(this).val();
                var _value = $(this).next(".value").val();
                //var _yz_type = $(".yz_type").eq($(this).index()).val();
                if(!_key || !_value){
                    is_return = true;
                    return false;
                }
                var item = '{"'+_key+'":"'+_value+'"}';
                res[i] = $.parseJSON(item);
            });
            if(is_return === true){
                return false;
            }
        }
        return res;
    }  
})
</script>